<template>
  <!-- 列表 -->
  <div
    class="flex module-show-list"
    v-if="list.length > 0"
    animation="lightSpeedIn"
  >
    <div
      class="module-show-item hand"
      @click.stop="jumpDetail(item)"
      v-for="(item, index) in list"
      :key="index + Date.now()"
    >
      <!-- 图片 -->
      <div class="image-lar">
        <!-- <img :src="item.full_cover_url" alt=""> -->
        <el-image :src="item.full_cover_url" class="full-bg">
          <div slot="placeholder" class="pac">
            <i class="el-icon-loading primary fs-xl"></i>
          </div>
          <div slot="error" class="pac">
            <i class="el-icon-loading primary fs-xl"></i>
          </div>
        </el-image>
      </div>
      <!-- 标题 -->
      <div class="flex title">
        <div class="pano-name" v-if="item.title">
          <el-tooltip
            effect="dark"
            :content="item.title"
            placement="bottom-start"
          >
            <p class="omit">
              {{ item.title }}
            </p>
          </el-tooltip>
        </div>
      </div>
      <!-- 副标题 -->
      <div class="omit-2 summary fc-b1 pdx2">{{ item.summary }}</div>
      <div class="num-date flex pdx2 mgb2">
        <div>
          <i class="iconfont icon-liulanliang fs-n"></i>
          <span class="fs-n">{{ item.seecount }}</span>
          <i class="iconfont icon-qinziAPPtubiao- fs-n mgl2"></i>
          <span class="fs-n">{{ item.praisecount }}</span>
        </div>
        <div class="fs-n">{{ item.created.slice(0, 10) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  methods: {
    // 跳转详情页
    jumpDetail(item) {
      // console.log(item)
      if (item && item.id) {
        this.$router.push({name: 'newsDetail', params: {id: item.id}})
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
.module-show-list
  flex-wrap wrap
  margin-top 30px
  .module-show-item
    width 24.25%
    margin-right 1%
    margin-bottom 20px
    position relative
    overflow hidden
    border 1px solid #eeeeee
    border-radius 4px
    &:hover
      .right-top
        display block
      > .image-lar
        .el-image
          transform scale(1.2)
      .pano-name
        p
          color var(--themeColor)
    .image-lar
      overflow hidden
      width 100%
      height 263px
      border-radius 4px
      .el-image
        width 100%
        height 100%
        transition all 0.5s
    .title
      justify-content space-between
      height 40px
      padding 10px 12px 15px 12px
      .pano-name
        width 90%
        font-size 15px
        font-family PingFang SC
        font-weight bold
        color #000000
      .pano-user
        width 30%
        font-size 14px
        font-family PingFang SC
        color #999999
    .summary
      min-height 38px
      margin-bottom 10px
    .num-date
      justify-content space-between
  .module-show-item:nth-child(4n)
    margin-right 0
</style>